{% extends "base.html" %}

{% block body %}
<p>
Hello {% include "user.snippet" %} &mdash; you're almost there.
</p>

<p class="fader faded-out" id="update-status-container"></p>

<script>
  updateCheckins(
      goog.dom.$('update-status-container'), function() {
        goog.dom.classes.addRemove(
            goog.dom.$('post-update-content'), 'faded-out', 'faded-in');
        fetchRecentIntersections(function(recentIntersectionHtml) {
          if (!goog.string.isEmptySafe(recentIntersectionHtml)) {
            var recentIntersectionsNode =
                goog.dom.$('recent-intersections-content');
            recentIntersectionsNode.innerHTML = recentIntersectionHtml;
            goog.dom.classes.addRemove(
                recentIntersectionsNode, 'faded-out', 'faded-in');
          }
        });
      });
</script>

<div class="fader faded-out" id="post-update-content">
  <h2>Now what?</h2>

  <p>
    {{ APP_NAME }} is a two-player deal. You need to find another Foursquare user
    to intersect your checkins with. You can:
  </p>

  <ul id="now-what-list">
    <li>
      Give out the link <a href="{{ short_url }}">{{ short_url }}</a> to
      others to have them intersect their checkins with yours.
    </li>
    <li>
      If you use Twitter, you can
      <a href="https://twitter.com/?status={{ tweet_text }}" target="_blank"><img src="/static/tweet-button.png" width="55" height="20" id="tweet-button" alt="Tweet"></a>
      out that link and get your followers to join in.
    </li>
    <li>
      If you're on the go, you can get a <a href="{{ qr_code_url }}">QR code</a>
      so that someone else can intersect their checkins without having to type
      in that long URL.
    </li>
  </ul>

  {% include "mihai-intersect.snippet" %}

  {% if user.email_address %}
  <label>
    <input type="checkbox" {% if not user.doesnt_want_mail %}checked{% endif %} onclick="toggleEmail()">
    Email me at <code>{{ user.email_address }}</code> when someone computes an intersection with my checkins.
  </label>
  {% endif %}
</div>

<div class="fader faded-out" id="recent-intersections-content">
</div>

<a id="sign-out-link" href="/sign-out">Sign out</a>

{% endblock %}
